<script setup name="Index">
import { ref, nextTick } from "vue";
import myChat from "./components/chat.vue";

import useInstructionStore from "@/store/modules/instructionList.js";

import { useRouter } from "vue-router";

const router = useRouter();

const chatRef = ref(null);
const value = ref("");
const messages = ref([]);

const isDisabled = computed(() => {
  return messages.value.find(item => item.disabled) != null;
});

const contentIndex = computed(() => {
  return useInstructionStore()?.list?.filter(item => item.isRead === false)
    .length;
});

const sendMessage = () => {
  if (value.value.trim() == "") {
    return;
  }
  chatRef.value.sendMessage();
  // chatRef.value.refactoringData({
  //   answer
  // });
  value.value = "";
};
</script>

<template>
  <!-- 主容器 -->
  <div class="contentBox">
    <van-nav-bar title="环保小助手" :right-disabled="isDisabled">
      <template #right>
        <van-badge
          :content="contentIndex"
          :show-zero="false"
          @click="isDisabled ? null : router.push('/commandPage/index')"
        >
          <van-icon name="add-o" size="24" color="#333" />
        </van-badge>
      </template>
    </van-nav-bar>

    <myChat
      :msg="value"
      ref="chatRef"
      @update:message="
        e => {
          messages = e;
        }
      "
    />

    <!-- 输入工具栏 -->
    <div class="tool">
      <van-field
        v-model="value"
        :placeholder="!isDisabled ? '请输入指令' : '思考中，请稍候'"
        class="input"
        @keyup.enter="sendMessage"
        :readonly="isDisabled"
      />
      <van-button
        type="primary"
        @click="sendMessage"
        class="btn"
        :disabled="isDisabled"
        icon="guide-o"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
/* 主容器布局 */
.contentBox {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f8f8f8;

  /* 输入工具栏 */
  .tool {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 顶部阴影 */

    .input {
      width: 80%;
      border-radius: 4px;
      border: 1px solid #ddd;
      transition: border-color 0.2s; /* 输入框聚焦动画 */
    }

    .btn {
      width: 15%;
      :deep(.van-button__text) {
        white-space: nowrap;
      }
    }
  }
}
</style>
